<template>
  <template v-for="(item, index) in props.routers" :key="index">
    <el-sub-menu v-if="item.children?.length > 0" :index="'' + index">
      <template #title>
        <el-icon><location /></el-icon>
        <span>{{ item.meta?.title }}</span>
      </template>
      <AppSubMenu :routers="item.children"></AppSubMenu>
    </el-sub-menu>
    <el-menu-item v-else :index="item.path" @click="handleMenuItemClick(item)">
      <el-icon><location /></el-icon>
      <span>{{ item.meta?.title }}</span>
    </el-menu-item>
  </template>
</template>

<script setup name="AppSubMenu">
import { debounce } from "lodash";
import { useRouter } from "vue-router";

const props = defineProps({
  routers: {
    type: Array,
    default: () => [],
  },
});

const router = useRouter();

const handleMenuItemClick = debounce(function (item) {
  router.push({
    path: item.path,
    query: item.query ?? {},
  });
}, 300);
</script>
<style lang="scss" scoped></style>
